<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>慕课网-绝对定位整页布局演示</title>
<link rel="stylesheet" href="121-absolute.css">
<style>
body { font-family: 'microsoft yahei'; }
</style>
</head>

<body>
<div class="page">
    <div class="header">
        <h1>慕课网</h1>
        <a href="javascript:" class="icon-add">添加</a>
        <a href="javascript:" class="icon-search">搜索</a>
    </div>
    <div class="content">
    	<div class="">
        	<a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:51</time></div>
                    <p>CSS深入理解值绝对定位</p>
                </div>
            </a>
        	<a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:38</time></div>
                    <p>如果高度不够，可以手动缩小浏览器高度</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:47</time></div>
                    <p>此demo是本系列最后一个demo</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:36</time></div>
                    <p>此demo需要在高级浏览器中查看</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div>
                    <p>重在原理展示，结构可多变。例如，header放在page外面~~</p>
                </div>
            </a> 
            <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div>
                    <p>最近鄙人整了个名叫Mobilebone的开源项目</p>
                </div>
            </a>
            <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div>
                    <p>就是依赖绝对定位整体布局，大家可以前去围观</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5 class="business">慕课网</h5><time>星期三</time></div>
                    <p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/121" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div>
                    <p>CSS深入理解之浮动</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/121" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>上周</time></div>
                    <p>同样精彩，欢迎支持~</p>
                </div>
            </a>
        </div>
    </div>
    
    <div class="footer">
        <a href="http://www.imooc.com/course/list">
            <i class="icon-wechat"></i>课程
        </a>
        <a href="http://www.imooc.com/wenda">
            <i class="icon-contacts"></i>问答
        </a>
        <a href="http://www.imooc.com/seek/index">
            <i class="icon-finds"></i>求课
        </a>
        <a href="http://www.imooc.com/space/course" class="active">
            <i class="icon-mes"></i>我的课程
        </a>
    </div>
</div>
</body>
</html>